<template>
	<view class="main">
		<view class="title">
			{{state.status==1?'欢迎登录来鱼':(state.status==2?'注册':'重置密码')}}
		</view>
		<view class="forms">
			<view class="labe">
				<input type="number" placeholder="手机号" v-model="state.phone" />
			</view>
			<view v-if="state.status==3">
				<view class="codes">
				<input type="number" placeholder="验证码" v-model="state.captcha"
							style="background: none;margin-bottom: 0;padding: 0 32rpx;" />
					<view class="code" @click="sendCodeBtn">
						{{state.send?'发送验证码':state.second+'s'}}
					</view>
				</view>
				<view class="labe"><input type="password" placeholder="新密码" v-model="state.new_pwd" /></view>
				<view class="labe"><input type="password" placeholder="确认新密码" v-model="state.new_pwds" /></view>
			</view>
			<view class="labe" v-if="state.status<3" ><input type="password" placeholder="密码" v-model="state.password"/>
			</view>
			<view class="labe" v-if="state.status==2"><input type="password" placeholder="确认密码" v-model="state.real_pwd"
					 /></view>
			<view v-if="state.status==1">
				<view class="others">
					<text @click="state.status=3">忘记密码</text>
					<text @click="state.status=2">注册</text>
				</view>
				<view class="button" style="background: #1BDDD0;" @click="getDeng">登录</view>
			</view>

			<view class="button" v-if="state.status==2" style="background: #1BDDD0;" @click="getRegister">注册</view>

			<view class="button" v-if="state.status==3" style="background: #1BDDD0;" @click="getTi">提交</view>

			<view class="logined" v-if="state.status>1" @click="state.status=1">登录</view>

		</view>
		<view v-if="state.status==1">
			<view class="logins">
				<text>其他登录方式</text>
				<view class="icons" >
					<image src="../../static/login_icon_weixin@2x.png" mode="" @click="getCode"></image>
					<!-- <image src="../../static/login_icon_sj@2x.png" mode=""></image> -->
				</view>
			</view>
			<view class="agreement">
				<view class="chose" @click="state.chosed=!state.chosed">
					<image
						:src="state.chosed?'../../static/login_icon_select2@2x.png':'../../static/login_icon_select@2x.png'"
						mode=""></image>
				</view>
				<view>我已阅读并同意<text style="color: #1BDDD0;font-size: 28rpx;"
						@click="sheep.$router.go('/pages/index/rule?title=用户协议&config=agreement')">《用户协议》</text>及<text
						style="color: #1BDDD0;font-size: 28rpx;" @click="sheep.$router.go('/pages/index/rule?title=隐私政策&config=privacy')">
						《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	const state = reactive({
		phone: '', //手机号
		password: '', //密码
		code: '', //验证码
		new_pwd: '', //新密码
		new_pwds: '', //确认新密码
		passwords: '', //确认密码
		real_pwd: '', //确认密码
		status: '1', //自定义1登录2注册3重置密码
		chosed: true, //是否同意
		s: 60, //默认倒计时
		second: 0,
		send: true, //按钮可以点击
		captcha: '',
	});
	onLoad((options) => {});

	function wxLogin() {

	}
	//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
	// uni.getUserInfo({
	//       provider: 'weixin',
	//       success: function (infoRes) {
	// 		   console.log('用户昵称为：' + infoRes.userInfo);
	//         console.log('用户昵称为：' + infoRes.userInfo.nickName);
	//       }
	//     });
	function getCode() {
		// #ifdef MP-WEIXIN
		uni.login({ 
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(event){
				const {code} = event
				console.log(event.code,'法师打发胜多负少’')
	
				uni.request({
				    url: 'https://api.weixin.qq.com/sns/jscode2session', //仅为示例，并非真实接口地址。
				    data: {
						appid: 'wx8966e6f8f7f61e42',
					    secret: '14652d53b21c315786edd4fe0730f382',
					    js_code: event.code,
					    grant_type: 'authorization_code'
				        // code: event.code
				    },
				    success: (res) => {
						console.log(res,'’VS的VS')
						console.log(res.data,'data')
					    console.log(res.data.openid,'opid')
				        //获得token完成登录
						// uni.setStorageSync('token',res.token)
				    }
				});
			},
			fail: function (err) {
		        // 登录授权失败  
		        // err.code是错误码
		    }
		})
		// #endif
		// #ifdef APP
		plus.oauth.getServices(function(services) {
			let weixinOauth = null;
			for (let i in services) {
				let service = services[i];
				// 获取微信登录对象 =
				if (service.id == 'weixin') {
					weixinOauth = service;
					break;
				}
			}
			weixinOauth.authorize(function(event) {
				console.log('------------')
				console.log(event)
				const {
					code
				} = event
				console.log(code)
			})
		})
		// #endif	
	}
	
	//重置密码
	async function getTi() {
		if (state.phone == "") {
		  uni.showToast({
		    title: "请输入账号",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.password == "") {
		  uni.showToast({
		    title: "请输入新密码",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.captcha == "") {
		  uni.showToast({
		    title: "请输入验证码",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		const {
			code,
			data
		} = await sheep.$api.login.resetpwd({
			mobile: state.phone,
			newpassword: state.password,
			captcha: state.captcha
		})
		if (code == 1) {
			console.log(data.userinfo.token, 'fasdfa')
			uni.setStorageSync('token', data.userinfo.token)
			state.status = 1
		}
	}
	// 点击送短信
	async function sendCodeBtn() {
		if (state.phone == "") {
		  uni.showToast({
		    title: "请输入手机号",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (!state.send) {
			return false;
		}
		const {
			code,
			data
		} = await sheep.$api.login.send({
			mobile: state.phone,
			event: 'changepwd'
		})
		if (code == 1) {
			state.send = false;
			uni.showToast({
				title: '发送成功',
				icon: 'none',
				success: () => {
					time(); // 倒计时
				}
			})
		}
	}

	function login() {
		uni.navigateTo({
			url: '/pages/index/index',
		});
		uni.switchTab({
			url: '/pages/index/index',
		});
	}
	// 倒计时
	function time() {
		// let that = this;
		state.second = state.s;
		let interval = setInterval(function() {
			if (state.second == 1) {
				state.send = true;
				state.second = state.s;
				clearInterval(interval);
			} else {
				console.log(state.second)
				state.second--;
			}
		}, 1000)
	}
	// 注册
	async function getRegister() {
		if (state.phone == "") {
		  uni.showToast({
		    title: "请输入账号",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.password == "") {
		  uni.showToast({
		    title: "请输入密码",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		console.log(state.password.length,'所发生的发')
		if (state.password.length<6) {
		  uni.showToast({
		    title: "请输入6-12位任意字符",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.password.length>12) {
		  uni.showToast({
		    title: "请输入6-12位任意字符",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.real_pwd == "") {
		  uni.showToast({
		    title: "请输入确认密码",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.password != state.real_pwd) {
		  uni.showToast({
		    title: "两次密码不一致，请重新输入",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		const {
			code,
			data
		} = await sheep.$api.login.register({
			mobile: state.phone,
			password: state.password,
			real_pwd: state.real_pwd
		})
		if (code == 1) {
			console.log(data.userinfo.token, 'fasdfa')
			uni.setStorageSync('token', data.userinfo.token)
			state.status = 1
		}
	}
	// 账号密码登录
	async function getDeng() {
		if (state.phone == "") {
		  uni.showToast({
		    title: "请输入账号",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		if (state.password == "") {
		  uni.showToast({
		    title: "请输入密码",
		    icon: "none",
		    duration: 1000,
		  })
		  return
		}
		console.log(state.chosed, 'state.chosed')
		
		if (state.chosed == true) {
			const {code,data} = await sheep.$api.login.userLogin({
				account: state.phone,
				password: state.password,
			})
			if (code == 1) {
				uni.setStorageSync('token', data.userinfo.token)
					const pages = getCurrentPages();  //判断跳转了多少页
					if (pages.length === 2) { 
						uni.navigateBack({
							delta: 1
						});
					} else if (pages.length === 1) { //如果没有上一页返回首页
						uni.switchTab({
							url: '/pages/index/index',
						})
					} else {
						uni.navigateBack({   
							delta:1,     
						});
					}
				 
				
				// uni.navigateBack({
				// 		delta:1,//返回层数，2则上上页
				// })
				// uni.switchTab({
				// 	url: '/pages/index/index',
				// });
			}
		} else {
			uni.showToast({
				title: '请仔细阅读《用户协议》及 《隐私政策》',
				icon: "none",
				mask: true,
				duration: 2000
			})
		}

	}

	function onChange() {
		state.protocol = !state.protocol;
	}

	function open(mode) {
		state.show = !state.show
	}

	function change() {
		console.log('触发动画')
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		width: 100%;

		.main {
			height: 100%;
			width: 100%;
			background: linear-gradient(180deg, rgba(27, 221, 208, 0.3) 0%, rgba(27, 221, 208, 0) 100%);

			.title {
				text-align: center;
				padding: 40% 0 96rpx;
				font-size: 20px;
				font-family: PingFang SC-Heavy, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			.forms {
				padding: 0 40rpx;
				width: 100%;
				margin: 0 auto;
				box-sizing: border-box;

				.labe {
					width:100%;
					padding: 32rpx;
					height: 104rpx;
					background-color: #fff;
					box-sizing: border-box;
					border-radius: 24rpx;
					margin-bottom: 24rpx;
				}

				input {
					
				}

				.codes {
					width: 100%;
					height: 104rpx;
					border-radius: 24rpx;
					display: flex;
					margin-bottom: 24rpx;
					align-items: center;
					background-color: #fff;
					box-sizing: border-box;

					input {
						width: 66%;
					}

					.code {
						white-space: nowrap;
						margin-left: auto;
						margin-right: 32rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 500;
						color: #1BDDD0;

					}
				}

				.others {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.button {
					margin-top: 80rpx;
					width: 100%;
					height: 92rpx;
					text-align: center;
					// background-color: #1BDDD0;
					line-height: 92rpx;
					border-radius: 54rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
				}

				.logined {
					text-align: center;
					margin-top: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

			}

			.logins {
				width: 100%;
				position: fixed;
				bottom: 160rpx;
				text-align: center;
				// margin: 336rpx auto 24rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.icons {
				display: flex;
				align-items: center;
				margin: 24rpx auto 0;
				justify-content: center;
				width: 30%;

				image {
					height: 84rpx;
					width: 84rpx;
				}

			}

			.agreement {
				position: fixed;
				bottom: 70rpx;
				left: 5%;
				width: 90%;
				display: flex;
				align-items: center;
				margin: auto;

				.chose {
					height: 32rpx;
					width: 32rpx;

					image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}
		}
	}
</style>